<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑问卷</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.min.css">
    <style>
        .ui.container {
            padding-top: 2rem;
        }

        .datetime {
            margin: 2rem 0;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body id="main">
<div v-cloak>
    <div class="ui container" v-if="!questionnaire.isPublished">
        <div class="ui fluid input">
            <input type="text" v-model="questionnaire.title" placeholder="问卷标题">
        </div>
        <table class="ui celled table">
            <thead>
            <tr>
                <th colspan="3">选择题目(已选{{questionsCount}})</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="question in questions">
                <td class="collapsing">
                    <div class="ui checkbox">
                        <input type="checkbox" v-model="question.selected" v-on:change="countQuestions"><label></label>
                    </div>
                </td>
                <td>{{question.content}}</td>
                <td class="collapsing" v-if="question.type==1">单选</td>
                <td class="collapsing" v-if="question.type==2">多选</td>
                <td class="collapsing" v-if="question.type==3">问答</td>
            </tr>
            </tbody>
        </table>
        <div class="datetime">
            <div class="ui labeled input">
                <div class="ui orange label">
                    截止时间
                </div>
                <input type="text" id="deadline" v-model="questionnaire.deadline"/>
            </div>
        </div>
        <button class="ui blue button" v-on:click="saveQuestionnaire">保存</button>
        <button class="ui green button" v-on:click="publishQuestionnaire">发布</button>
        <button class="ui red right floated button" v-on:click="deleteQuestionnaire">删除问卷</button>
        <div class="ui error message" v-if="errorMessage">{{errorMessage}}</div>
    </div>
    <div class="ui container" v-else>
        <h3 class="ui dividing header">{{questionnaire.title}} (已发布)</h3>
        <table class="ui celled table">
            <thead>
            <tr>
                <th colspan="3">题目({{questionsCount}})</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="question in questions">
                <td class="collapsing">
                    <div class="ui checkbox">
                        <input type="checkbox" disabled v-model="question.selected"
                               v-on:change="countQuestions"><label></label>
                    </div>
                </td>
                <td>{{question.content}}</td>
                <td class="collapsing" v-if="question.type==1">单选</td>
                <td class="collapsing" v-if="question.type==2">多选</td>
                <td class="collapsing" v-if="question.type==3">问答</td>
            </tr>
            </tbody>
        </table>
        <p class="datetime">
        <h4 class="ui header">
            截止时间: {{questionnaire.deadline}}
        </h4>
        <h4 class="ui header">
            <a href="/questionnaire/{{questionnaire._id}}">问卷页面</a>
        </h4>
        <h4 class="ui header">
            <a href="/result/{{questionnaire._id}}">统计数据</a>
        </h4>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.min.js"></script>
<script src="/manage/js/notie.js"></script>
<script src="/manage/js/jquery.datetimepicker.js"></script>
<script src="/manage/js/edit_questionnaire.js"></script>
</body>
</html>